<template>
  <div class="messages">
    <div class="clearfix">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <Checkbox v-model="selectAll" >&nbsp;</Checkbox>
      <Tag color="primary">标记为已读</Tag><Tag>全部</Tag><Tag>邀请消息</Tag><Tag>缴费消息</Tag>
      <span class="fr">
        <Icon type="ios-trash c4" size="24"  @click="deleteConfirm"/>
      </span>
    </div>
    <div class="mt10">
      
    
    <CheckboxGroup v-model="single">
      <Collapse v-model="value1">
        <Panel :name="String(i)" v-for="i in list" :key="i">
          <Checkbox :label="i">&nbsp;</Checkbox> 
          &nbsp;&nbsp;
          【会议通知】您被邀请参加xxxx公司的会议 
          &nbsp;&nbsp;
          <a href="#" class="link-warning" >查看详情</a>
          <span class="c3 fr">2019-09-09</span>
          <p slot="content" style="line-height: 1.5;">
            史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
            史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
            史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
          </p>
        </Panel>
      </Collapse>
    </CheckboxGroup>
    
    </div>
      
     <div class="page mt20">
       <Page :total="100" show-sizer />
     </div> 
      
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '0',
        single: [],
        selectAll: false,
        list: [0, 1, 2, 3, 4,5, 6,7, 8,9],
        position:[{
          title: '消息中心'
        }],
        params:{
          showType: '1', // 1 邀请  2 缴费
          page: 1,
          limit: 10
        }
      }
    },
    mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
      this.getMessage()
    },
    watch:{
      selectAll (newval){
        if (newval) {
          let temp = []
          this.list.forEach(v => temp.push(v))
          this.single = temp
        } else {
          this.single = []
        }
      }
    },
    methods:{
      getMessage (){
        this.$postJson(this.$API.messageList, this.params).then(res => {
          if (res.errno) {
            this.$Message.error(res.errmsg)
            return
          }
        })
      },
      deleteConfirm () {
        this.$Modal.confirm({
          title: '警告',
          content: '清空所有消息吗?',
          onOk () {
             this.$Message.success('删除成功')
          }
        })
      }
    }
  }
</script>

<style>
</style>
